<!-- 底部按钮 -->
<template>
  <div id="box">
      <div class="onebox">
        <div>
            <span class="one"></span>
            <p>客户</p>
        </div>
        <div>
          <span class="two"></span>
          <p>店铺</p>
        </div>
        <div  @click="collect">
           <span class="three" :class="{iscollect:isactive}" ></span>
           <p>收藏</p>
        </div>
      </div>
      <div class="twobox">
          <p @click="goshop">加入购物车</p>
          <p>购买</p>
      </div>
  </div>
</template>

<script>
export default {
    name:"bottom",
    data () {
        return {
                isactive:false     
        }
    },
    methods: {
        collect(){
                this.isactive=!this.isactive
        },
        //点击这个商品后把这个商品的信息打印
        goshop(){
             this.$emit("goshop")
        }
    }
}

</script>
<style  scoped>
#box{
     height: 49px;
     position: fixed;
     left: 0;
     right: 0;
     bottom: 0;
     z-index: 50;
     display: flex;
     background: yellow;
}
.onebox{
    flex: 1;
    display: flex;
    text-align: center;
    font-size: 15px;
    background: #f6f6f6;
}
.onebox>div{
     flex: 1;
}
.twobox{
    flex: 1;
    display: flex;
    text-align: center;
    line-height: 49px;
}
.twobox>p{
     flex: 1;
}
.twobox>p:nth-child(2){
     background: coral;
}
 span{
     display: inline-block;
     width: 22px;
	 height: 25px;
     background: url("~assets/img/detail_bottom.png") no-repeat 0 0 ;
     /* 缩放背景图片 */
     background-size:22px 150px;
}
 .one{
    background-position:0  -50px;
}
.two{
    background-position:0 -95px ;
}
.three{
    background-position:0  4px;
} 
.iscollect{
     background-position: 0 -25px ;
}

</style>